const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const extractSass = new ExtractTextPlugin({
	filename: 'static/css/[id].[hash].css',
	allChunks: true,
    disable: process.env.NODE_ENV === 'development'
})
module.exports = {
	mode: process.env.NODE_ENV,
	entry: './src/index.ts',
	output: {
		path: path.resolve(__dirname, '../dist'),
		filename: 'static/js/app.[hash].js',
		publicPath: '/'
	},
	resolve: {
		extensions: ['.ts', '.tsx', '.js'],
		alias: {
			'@': path.resolve(__dirname, '../src')
		}
	},
	module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: [
					{
						loader: 'ts-loader',
						options: {
						  transpileOnly: true,
						  configFile: path.resolve(__dirname, '../tsconfig.json')
						}
					}
				]
			},
			{
				test: /\.scss$/,
				use: extractSass.extract({
					use: [{
						loader: 'css-loader'
					}, {
						loader: 'sass-loader'
					}],
					fallback: 'style-loader'
				}),
			},
			{
				test: /\.(jpe?g|png|gif)$/,
				use: [
					{
						loader: 'url-loader',
						options: {
							name: '[name].[hash].[ext]',
							limit: 8196,
							outputPath: 'static/images/'
						}
					}
				]
			}
		]
	},
	plugins: [
		new CleanWebpackPlugin(),
		extractSass,
		new HtmlWebpackPlugin({
			title: 'ts-webpack-app',
			template: 'index.html',
			minify: {
				collapseWhitespace: true,
				removeComments: true,
				removeRedundantAttributes: true,
				removeScriptTypeAttributes: true,
				removeStyleLinkTypeAttributes: true,
				useShortDoctype: true
			},
			meta: {
				'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no'
			}
		})
	],
	devServer: {
		contentBase: 'dist',
		compress: true,
		port: 9000,
		open: true
	}
}